//
//  ContentView.swift
//  LOTR Converter
//
//  Created by li on 2025/4/2.
//

import SwiftUI
import TipKit

struct ContentView: View {
    //let 不变量 == const
    //var 变量
    //@State 属性包装器（property wrapper）允许属性改变视图状态
    @State var showExchangeInfo :Bool = false
    @State var showSelectCurrency :Bool = false
    @State var leftAmount : String = ""
    @State var rightAmount : String = ""
    @State var leftCurrency:Currency = .sliverPiece
    @State var rightCurrency:Currency = .goldPiece
    
    @FocusState var leftTyping
    @FocusState var rightTyping
    let currencyTip = CurrencyTip()
    
    var body: some View {
        ZStack{
            //背景图片
            Image(.background)
                .resizable() //SafeArea
                .ignoresSafeArea()//忽略
            VStack{
                //跳跃马
                Image(.prancingpony)
                    .resizable()
                    .scaledToFit()//保持原宽高比
                    .frame(height: 200)
                //货币交换文本
                Text("货币交换")
                    .font(.largeTitle)
                    .foregroundStyle(.white)
                //交换器
                HStack{
                    //左
                    VStack{
                        //货币
                        HStack{
                            //货币图片
                            Image(leftCurrency.image)
                                .resizable()
                                .scaledToFit()
                                .frame(height: 33)
                            //货币文本
                            Text(leftCurrency.name)
                                .font(.headline)
                                .foregroundStyle(.white)
                        }
                        .padding(.bottom,-5)
                        .onTapGesture {
                            showSelectCurrency.toggle()
                            currencyTip.invalidate(reason: .actionPerformed)
                        }
                        .popoverTip(currencyTip,arrowEdge: .bottom)
                        //文本框
                        //Text("Text Field")
                        TextField("数量", text: $leftAmount) //绑定sliverCurrency
                            .textFieldStyle(.roundedBorder)
                            .focused($leftTyping) //绑定焦点
            
                    }
                    //等于号
                    Image(systemName: "equal")
                        .font(.largeTitle)
                        .foregroundStyle(.white)
                        .symbolEffect(.pulse)
                    //右
                    VStack{
                        //货币
                        HStack{
                            //货币文本
                            Text(rightCurrency.name)
                                .font(.headline)
                                .foregroundStyle(.white)
                            //货币图片
                            Image(rightCurrency.image)
                                .resizable()
                                .scaledToFit()
                                .frame(width: 33)
                        }
                        .padding(.bottom,-5)
                        .onTapGesture {
                            showSelectCurrency.toggle()
                            currencyTip.invalidate(reason: .actionPerformed)
                        }
                        //文本框
                        TextField("数量", text: $rightAmount)
                            .textFieldStyle(.roundedBorder)
                            .multilineTextAlignment(.trailing)
                            .focused($rightTyping)
                            
                            
                        
                    }
                }
                .keyboardType(.decimalPad)
                .padding()
                .background(.black.opacity(0.5))
                .clipShape(.capsule)
                Spacer()

                //按钮
                HStack{
                    Spacer()
                    Button{
                        showExchangeInfo.toggle()
                        print("showExchangeInfo : \(showExchangeInfo)")
                    }label: {
                        Image(systemName: "info.circle.fill")
                            .font( .largeTitle)
                            .foregroundStyle(.white)
                    }
                    .padding(.trailing)
                    
                    .task {
                        try? Tips.configure()
                    }
                    
                    .onChange(of: leftAmount){
                        if leftTyping{
                            rightAmount = leftCurrency.convert(amount: leftAmount, currency: rightCurrency)
                        }
                    }
                    
                    .onChange(of: rightAmount){
                        if rightTyping{
                            leftAmount = rightCurrency.convert(amount: rightAmount, currency: leftCurrency)
                        }
                    }
                    
                    .onChange(of: leftCurrency){
                        leftAmount = rightCurrency.convert(amount: rightAmount, currency: leftCurrency)
                    }
                    .onChange(of: rightCurrency){
                        rightAmount = leftCurrency.convert(amount: leftAmount, currency: rightCurrency)
                    }
                    
                    .sheet(
                        isPresented: $showExchangeInfo){//showExchangeInfo为true时弹出,与位置无关
                        ExchangeInfo()
                    }
                }.sheet(isPresented: $showSelectCurrency){
                    SelectCurrency(topCurrency: $leftCurrency, bottomRurrency: $rightCurrency)
                }
            }
//            .border(.blue)
        }
    }
}

#Preview {
    ContentView()
}
